{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "0b93326c-7b89-41e8-91aa-49b8326852d7",
   "metadata": {},
   "source": [
    "# Legend Justification Functions\n",
    "\n",
    "Special `theme` functions for setting legend justification:\n",
    "* `legendJustificationCenter()` - the default behavior\n",
    "* `legendJustificationTop()`\n",
    "* `legendJustificationRight()`\n",
    "* `legendJustificationBottom()`\n",
    "* `legendJustificationLeft()`."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "6cbd92ad-50b5-4c81-8667-9d5897dfa444",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "   <div id=\"bEiKDH\"></div>\n",
       "   <script type=\"text/javascript\" data-lets-plot-script=\"library\">\n",
       "       if(!window.letsPlotCallQueue) {\n",
       "           window.letsPlotCallQueue = [];\n",
       "       }; \n",
       "       window.letsPlotCall = function(f) {\n",
       "           window.letsPlotCallQueue.push(f);\n",
       "       };\n",
       "       (function() {\n",
       "           var script = document.createElement(\"script\");\n",
       "           script.type = \"text/javascript\";\n",
       "           script.src = \"https://cdn.jsdelivr.net/gh/JetBrains/lets-plot@v4.8.1rc1/js-package/distr/lets-plot.min.js\";\n",
       "           script.onload = function() {\n",
       "               window.letsPlotCall = function(f) {f();};\n",
       "               window.letsPlotCallQueue.forEach(function(f) {f();});\n",
       "               window.letsPlotCallQueue = [];\n",
       "               \n",
       "               \n",
       "           };\n",
       "           script.onerror = function(event) {\n",
       "               window.letsPlotCall = function(f) {};\n",
       "               window.letsPlotCallQueue = [];\n",
       "               var div = document.createElement(\"div\");\n",
       "               div.style.color = 'darkred';\n",
       "               div.textContent = 'Error loading Lets-Plot JS';\n",
       "               document.getElementById(\"bEiKDH\").appendChild(div);\n",
       "           };\n",
       "           var e = document.getElementById(\"bEiKDH\");\n",
       "           e.appendChild(script);\n",
       "       })();\n",
       "   </script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "            <div id=\"kotlin_out_0\"></div>\n",
       "            <script type=\"text/javascript\">\n",
       "                            if(!window.kotlinQueues) {\n",
       "                window.kotlinQueues = {};\n",
       "            }\n",
       "            if(!window.kotlinQueues[\"letsPlotJs\"]) {\n",
       "                var resQueue = [];\n",
       "                window.kotlinQueues[\"letsPlotJs\"] = resQueue;\n",
       "                window[\"call_letsPlotJs\"] = function(f) {\n",
       "                    resQueue.push(f);\n",
       "                }\n",
       "            }\n",
       "            (function (){\n",
       "                var modifiers = [(function(script) {\n",
       "    script.src = \"https://cdn.jsdelivr.net/gh/JetBrains/lets-plot@v4.8.1rc1/js-package/distr/lets-plot.min.js\"\n",
       "    script.type = \"text/javascript\";\n",
       "})];\n",
       "                var e = document.getElementById(\"kotlin_out_0\");\n",
       "                modifiers.forEach(function (gen) {\n",
       "                    var script = document.createElement(\"script\");\n",
       "                    gen(script)\n",
       "                    script.addEventListener(\"load\", function() {\n",
       "                        window[\"call_letsPlotJs\"] = function(f) {f();};\n",
       "                        window.kotlinQueues[\"letsPlotJs\"].forEach(function(f) {f();});\n",
       "                        window.kotlinQueues[\"letsPlotJs\"] = [];\n",
       "                    }, false);\n",
       "                    script.addEventListener(\"error\", function() {\n",
       "                        window[\"call_letsPlotJs\"] = function(f) {};\n",
       "                        window.kotlinQueues[\"letsPlotJs\"] = [];\n",
       "                        var div = document.createElement(\"div\");\n",
       "                        div.style.color = 'darkred';\n",
       "                        div.textContent = 'Error loading resource letsPlotJs';\n",
       "                        document.getElementById(\"kotlin_out_0\").appendChild(div);\n",
       "                    }, false);\n",
       "                    \n",
       "                    e.appendChild(script);\n",
       "                });\n",
       "            })();\n",
       "            </script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "%useLatestDescriptors\n",
    "%use lets-plot"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "63abb6d8-cc67-41f5-b504-b8b749511507",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "Lets-Plot Kotlin API v.4.11.3-SNAPSHOT. Frontend: Notebook with dynamically loaded JS. Lets-Plot JS v.4.8.1rc1.\n",
       "Outputs: Web (HTML+JS), Kotlin Notebook (Swing), Static SVG (hidden)"
      ]
     },
     "execution_count": 2,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "LetsPlot.getInfo()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "57bf01b7-2d50-44ed-a085-3614f189dd17",
   "metadata": {},
   "outputs": [],
   "source": [
    "val data = mapOf(\n",
    "    \"x\" to listOf(0.0, 0.4, 1.0),\n",
    "    \"y\" to listOf(0.0, 0.6, 1.0),\n",
    "    \"Color\" to listOf(\"A\", \"B\", \"C\")\n",
    ")\n",
    "\n",
    "val p =\n",
    "    letsPlot(data) { x = \"x\"; y = \"y\"; color = \"Color\" } +\n",
    "        geomPoint() +\n",
    "        theme(plotTitle = elementText(hjust = 0.5)) +\n",
    "        ggsize(500, 300)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "4bc8937b-e0a5-4b8e-be6e-19193ae57070",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "   <div id=\"ZoyLTt\"></div>\n",
       "   <script type=\"text/javascript\" data-lets-plot-script=\"library\">\n",
       "       if(!window.letsPlotCallQueue) {\n",
       "           window.letsPlotCallQueue = [];\n",
       "       }; \n",
       "       window.letsPlotCall = function(f) {\n",
       "           window.letsPlotCallQueue.push(f);\n",
       "       };\n",
       "       (function() {\n",
       "           var script = document.createElement(\"script\");\n",
       "           script.type = \"text/javascript\";\n",
       "           script.src = \"https://cdn.jsdelivr.net/gh/JetBrains/lets-plot@v4.8.1rc1/js-package/distr/lets-plot.min.js\";\n",
       "           script.onload = function() {\n",
       "               window.letsPlotCall = function(f) {f();};\n",
       "               window.letsPlotCallQueue.forEach(function(f) {f();});\n",
       "               window.letsPlotCallQueue = [];\n",
       "               \n",
       "               \n",
       "           };\n",
       "           script.onerror = function(event) {\n",
       "               window.letsPlotCall = function(f) {};\n",
       "               window.letsPlotCallQueue = [];\n",
       "               var div = document.createElement(\"div\");\n",
       "               div.style.color = 'darkred';\n",
       "               div.textContent = 'Error loading Lets-Plot JS';\n",
       "               document.getElementById(\"ZoyLTt\").appendChild(div);\n",
       "           };\n",
       "           var e = document.getElementById(\"ZoyLTt\");\n",
       "           e.appendChild(script);\n",
       "       })();\n",
       "   </script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/plot+json": {
       "apply_color_scheme": true,
       "output": {
        "data": {
         "Color": [
          "A",
          "B",
          "C"
         ],
         "x": [
          0,
          0.4,
          1
         ],
         "y": [
          0,
          0.6,
          1
         ]
        },
        "data_meta": {
         "series_annotations": [
          {
           "column": "x",
           "type": "float"
          },
          {
           "column": "y",
           "type": "float"
          },
          {
           "column": "Color",
           "type": "str"
          }
         ]
        },
        "ggsize": {
         "height": 300,
         "width": 500
        },
        "ggtitle": {
         "text": "Default legend position"
        },
        "kind": "plot",
        "layers": [
         {
          "geom": "point",
          "mapping": {},
          "position": "identity",
          "stat": "identity"
         }
        ],
        "mapping": {
         "color": "Color",
         "x": "x",
         "y": "y"
        },
        "scales": [],
        "theme": {
         "plot_title": {
          "blank": false,
          "hjust": 0.5
         }
        }
       },
       "output_type": "lets_plot_spec",
       "swing_enabled": true
      },
      "text/html": [
       "   <div id=\"jEt0Gn\" ></div>\n",
       "   <script type=\"text/javascript\" data-lets-plot-script=\"plot\">\n",
       "   \n",
       "   (function() {\n",
       "   // ----------\n",
       "   \n",
       "   const forceImmediateRender = false;\n",
       "   const responsive = false;\n",
       "   \n",
       "   let sizing = {\n",
       "       width_mode: \"MIN\",\n",
       "       height_mode: \"SCALED\",\n",
       "       width: null, \n",
       "       height: null \n",
       "   };\n",
       "   \n",
       "   const preferredWidth = document.body.dataset.letsPlotPreferredWidth;\n",
       "   if (preferredWidth !== undefined) {\n",
       "       sizing = {\n",
       "           width_mode: 'FIXED',\n",
       "           height_mode: 'SCALED',\n",
       "           width: parseFloat(preferredWidth)\n",
       "       };\n",
       "   }\n",
       "   \n",
       "   const containerDiv = document.getElementById(\"jEt0Gn\");\n",
       "   let fig = null;\n",
       "   \n",
       "   function renderPlot() {\n",
       "       if (fig === null) {\n",
       "           const plotSpec = {\n",
       "\"ggtitle\":{\n",
       "\"text\":\"Default legend position\"\n",
       "},\n",
       "\"mapping\":{\n",
       "\"x\":\"x\",\n",
       "\"y\":\"y\",\n",
       "\"color\":\"Color\"\n",
       "},\n",
       "\"data\":{\n",
       "\"Color\":[\"A\",\"B\",\"C\"],\n",
       "\"x\":[0.0,0.4,1.0],\n",
       "\"y\":[0.0,0.6,1.0]\n",
       "},\n",
       "\"ggsize\":{\n",
       "\"width\":500.0,\n",
       "\"height\":300.0\n",
       "},\n",
       "\"kind\":\"plot\",\n",
       "\"scales\":[],\n",
       "\"layers\":[{\n",
       "\"mapping\":{\n",
       "},\n",
       "\"stat\":\"identity\",\n",
       "\"position\":\"identity\",\n",
       "\"geom\":\"point\",\n",
       "\"data\":{\n",
       "}\n",
       "}],\n",
       "\"theme\":{\n",
       "\"plot_title\":{\n",
       "\"hjust\":0.5,\n",
       "\"blank\":false\n",
       "}\n",
       "},\n",
       "\"data_meta\":{\n",
       "\"series_annotations\":[{\n",
       "\"type\":\"float\",\n",
       "\"column\":\"x\"\n",
       "},{\n",
       "\"type\":\"float\",\n",
       "\"column\":\"y\"\n",
       "},{\n",
       "\"type\":\"str\",\n",
       "\"column\":\"Color\"\n",
       "}]\n",
       "},\n",
       "\"spec_id\":\"1\"\n",
       "};\n",
       "           window.letsPlotCall(function() { fig = LetsPlot.buildPlotFromProcessedSpecs(plotSpec, containerDiv, sizing); });\n",
       "       } else {\n",
       "           fig.updateView({});\n",
       "       }\n",
       "   }\n",
       "   \n",
       "   const renderImmediately = \n",
       "       forceImmediateRender || (\n",
       "           sizing.width_mode === 'FIXED' && \n",
       "           (sizing.height_mode === 'FIXED' || sizing.height_mode === 'SCALED')\n",
       "       );\n",
       "   \n",
       "   if (renderImmediately) {\n",
       "       renderPlot();\n",
       "   }\n",
       "   \n",
       "   if (!renderImmediately || responsive) {\n",
       "       // Set up observer for initial sizing or continuous monitoring\n",
       "       var observer = new ResizeObserver(function(entries) {\n",
       "           for (let entry of entries) {\n",
       "               if (entry.contentBoxSize && \n",
       "                   entry.contentBoxSize[0].inlineSize > 0) {\n",
       "                   if (!responsive && observer) {\n",
       "                       observer.disconnect();\n",
       "                       observer = null;\n",
       "                   }\n",
       "                   renderPlot();\n",
       "                   if (!responsive) {\n",
       "                       break;\n",
       "                   }\n",
       "               }\n",
       "           }\n",
       "       });\n",
       "       \n",
       "       observer.observe(containerDiv);\n",
       "   }\n",
       "   \n",
       "   // ----------\n",
       "   })();\n",
       "   \n",
       "   </script>                <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" display=\"block\" class=\"plt-container\" id=2f8a0a18-7160-4f20-b3bb-c00727de6e22 width=\"100%\" height=\"100%\" style=\"max-width: 500.0px; max-height: 300.0px;\" viewBox=\"0 0 500.0 300.0\" preserveAspectRatio=\"xMinYMin meet\">\n",
       "  <style type=\"text/css\">\n",
       "  .plt-container {\n",
       "   font-family: sans-serif;\n",
       "   user-select: none;\n",
       "   -webkit-user-select: none;\n",
       "   -moz-user-select: none;\n",
       "   -ms-user-select: none;\n",
       "}\n",
       "text {\n",
       "   text-rendering: optimizeLegibility;\n",
       "}\n",
       "#pWBxjDF .plot-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 16.0px;\n",
       "\n",
       "}\n",
       "#pWBxjDF .plot-subtitle {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pWBxjDF .plot-caption {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pWBxjDF .hyperlink-element {\n",
       "fill: #118ed8;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "\n",
       "}\n",
       "#pWBxjDF .legend-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pWBxjDF .legend-item {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pWBxjDF .axis-title-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pWBxjDF .axis-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dUHZwpA .axis-tooltip-text-x {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pWBxjDF .axis-title-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pWBxjDF .axis-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dUHZwpA .axis-tooltip-text-y {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pWBxjDF .facet-strip-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pWBxjDF .facet-strip-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dUHZwpA .tooltip-text {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dUHZwpA .tooltip-title {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dUHZwpA .tooltip-label {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "\n",
       "  </style>\n",
       "  <g id=\"pWBxjDF\">\n",
       "    <path fill-rule=\"evenodd\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" d=\"M0.0 0.0 L0.0 300.0 L500.0 300.0 L500.0 0.0 Z\">\n",
       "    </path>\n",
       "    <g transform=\"translate(21.0 22.0 ) \">\n",
       "      <g>\n",
       "        <g transform=\"translate(23.034701220281416 0.0 ) \">\n",
       "          <g>\n",
       "            <line x1=\"18.112631411001328\" y1=\"0.0\" x2=\"18.112631411001328\" y2=\"238.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"90.56315705500664\" y1=\"0.0\" x2=\"90.56315705500664\" y2=\"238.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"163.01368269901195\" y1=\"0.0\" x2=\"163.01368269901195\" y2=\"238.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"235.46420834301728\" y1=\"0.0\" x2=\"235.46420834301728\" y2=\"238.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"307.91473398702254\" y1=\"0.0\" x2=\"307.91473398702254\" y2=\"238.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"380.3652596310278\" y1=\"0.0\" x2=\"380.3652596310278\" y2=\"238.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "          </g>\n",
       "        </g>\n",
       "        <g transform=\"translate(23.034701220281416 0.0 ) \">\n",
       "          <g>\n",
       "            <line x1=\"0.0\" y1=\"227.1818181818182\" x2=\"398.47789104202917\" y2=\"227.1818181818182\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"0.0\" y1=\"183.9090909090909\" x2=\"398.47789104202917\" y2=\"183.9090909090909\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"0.0\" y1=\"140.63636363636363\" x2=\"398.47789104202917\" y2=\"140.63636363636363\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"0.0\" y1=\"97.36363636363637\" x2=\"398.47789104202917\" y2=\"97.36363636363637\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"0.0\" y1=\"54.09090909090909\" x2=\"398.47789104202917\" y2=\"54.09090909090909\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "            <line x1=\"0.0\" y1=\"10.818181818181841\" x2=\"398.47789104202917\" y2=\"10.818181818181841\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "            </line>\n",
       "          </g>\n",
       "        </g>\n",
       "      </g>\n",
       "      <g clip-path=\"url(#cQnqHyb)\" clip-bounds-jfx=\"[rect (23.034701220281416, 0.0), (398.47789104202917, 238.0)]\">\n",
       "        <g transform=\"translate(23.034701220281416 0.0 ) \">\n",
       "          <g>\n",
       "            <g>\n",
       "              <g>\n",
       "                <g >\n",
       "                  <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"18.112631411001328\" cy=\"227.1818181818182\" r=\"3.3000000000000003\" />\n",
       "                  <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"163.01368269901195\" cy=\"97.36363636363637\" r=\"3.3000000000000003\" />\n",
       "                  <circle fill=\"#4daf4a\" stroke=\"#4daf4a\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"380.3652596310278\" cy=\"10.818181818181841\" r=\"3.3000000000000003\" />\n",
       "                </g>\n",
       "              </g>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "        <defs>\n",
       "          <clipPath id=\"cQnqHyb\">\n",
       "            <rect x=\"23.034701220281416\" y=\"0.0\" width=\"398.47789104202917\" height=\"238.0\">\n",
       "            </rect>\n",
       "          </clipPath>\n",
       "        </defs>\n",
       "      </g>\n",
       "      <g>\n",
       "        <g transform=\"translate(23.034701220281416 238.0 ) \">\n",
       "          <g transform=\"translate(18.112631411001328 0.0 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(0.0 6.0 ) \">\n",
       "              <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                <tspan>0</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(90.56315705500664 0.0 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(0.0 6.0 ) \">\n",
       "              <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                <tspan>0.2</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(163.01368269901195 0.0 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(0.0 6.0 ) \">\n",
       "              <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                <tspan>0.4</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(235.46420834301728 0.0 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(0.0 6.0 ) \">\n",
       "              <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                <tspan>0.6</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(307.91473398702254 0.0 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(0.0 6.0 ) \">\n",
       "              <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                <tspan>0.8</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(380.3652596310278 0.0 ) \">\n",
       "            <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "            </line>\n",
       "            <g transform=\"translate(0.0 6.0 ) \">\n",
       "              <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                <tspan>1</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <line x1=\"0.0\" y1=\"0.0\" x2=\"398.47789104202917\" y2=\"0.0\" stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\">\n",
       "          </line>\n",
       "        </g>\n",
       "        <g transform=\"translate(23.034701220281416 0.0 ) \">\n",
       "          <g transform=\"translate(0.0 227.1818181818182 ) \">\n",
       "            <g transform=\"translate(-2.0 0.0 ) \">\n",
       "              <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                <tspan>0</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 183.9090909090909 ) \">\n",
       "            <g transform=\"translate(-2.0 0.0 ) \">\n",
       "              <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                <tspan>0.2</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 140.63636363636363 ) \">\n",
       "            <g transform=\"translate(-2.0 0.0 ) \">\n",
       "              <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                <tspan>0.4</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 97.36363636363637 ) \">\n",
       "            <g transform=\"translate(-2.0 0.0 ) \">\n",
       "              <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                <tspan>0.6</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 54.09090909090909 ) \">\n",
       "            <g transform=\"translate(-2.0 0.0 ) \">\n",
       "              <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                <tspan>0.8</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 10.818181818181841 ) \">\n",
       "            <g transform=\"translate(-2.0 0.0 ) \">\n",
       "              <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                <tspan>1</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "      </g>\n",
       "    </g>\n",
       "    <g transform=\"translate(243.273646741296 15.8 ) \">\n",
       "      <text style=\"font-size:16.0px;\" y=\"0.0\" class=\"plot-title\" text-anchor=\"middle\">\n",
       "        <tspan>Default legend position</tspan>\n",
       "      </text>\n",
       "    </g>\n",
       "    <g transform=\"translate(15.0 141.0 ) rotate(-90.0 ) \">\n",
       "      <text style=\"font-size:15.0px;\" y=\"0.0\" class=\"axis-title-y\" text-anchor=\"middle\">\n",
       "        <tspan>y</tspan>\n",
       "      </text>\n",
       "    </g>\n",
       "    <g transform=\"translate(243.273646741296 294.0 ) \">\n",
       "      <text style=\"font-size:15.0px;\" y=\"0.0\" class=\"axis-title-x\" text-anchor=\"middle\">\n",
       "        <tspan>x</tspan>\n",
       "      </text>\n",
       "    </g>\n",
       "    <g transform=\"translate(445.51259226231053 90.25 ) \">\n",
       "      <rect x=\"0.0\" y=\"0.0\" height=\"101.5\" width=\"51.487407737689445\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" stroke-width=\"0.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\">\n",
       "      </rect>\n",
       "      <g transform=\"translate(5.0 5.0 ) \">\n",
       "        <g transform=\"translate(0.0 12.0 ) \">\n",
       "          <text style=\"font-size:15.0px;\" y=\"0.0\" class=\"legend-title\">\n",
       "            <tspan>Color</tspan>\n",
       "          </text>\n",
       "        </g>\n",
       "        <g transform=\"translate(0.0 22.5 ) \">\n",
       "          <g transform=\"\">\n",
       "            <g>\n",
       "              <g transform=\"translate(1.0 1.0 ) \">\n",
       "                <g>\n",
       "                  <g >\n",
       "                    <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"10.5\" cy=\"10.5\" r=\"5.5\" />\n",
       "                  </g>\n",
       "                </g>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(26.9903027277341 11.5 ) \">\n",
       "              <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"legend-item\" dy=\"0.35em\">\n",
       "                <tspan>A</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 23.0 ) \">\n",
       "            <g>\n",
       "              <g transform=\"translate(1.0 1.0 ) \">\n",
       "                <g>\n",
       "                  <g >\n",
       "                    <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"10.5\" cy=\"10.5\" r=\"5.5\" />\n",
       "                  </g>\n",
       "                </g>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(26.9903027277341 11.5 ) \">\n",
       "              <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"legend-item\" dy=\"0.35em\">\n",
       "                <tspan>B</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 46.0 ) \">\n",
       "            <g>\n",
       "              <g transform=\"translate(1.0 1.0 ) \">\n",
       "                <g>\n",
       "                  <g >\n",
       "                    <circle fill=\"#4daf4a\" stroke=\"#4daf4a\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"10.5\" cy=\"10.5\" r=\"5.5\" />\n",
       "                  </g>\n",
       "                </g>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(26.9903027277341 11.5 ) \">\n",
       "              <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"legend-item\" dy=\"0.35em\">\n",
       "                <tspan>C</tspan>\n",
       "              </text>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "      </g>\n",
       "    </g>\n",
       "    <path fill=\"rgb(0,0,0)\" fill-opacity=\"0.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" stroke-width=\"0.0\" d=\"M0.0 0.0 L0.0 300.0 L500.0 300.0 L500.0 0.0 Z\" pointer-events=\"none\">\n",
       "    </path>\n",
       "  </g>\n",
       "  <g id=\"dUHZwpA\">\n",
       "  </g>\n",
       "</svg>\n",
       "                <script>document.getElementById(\"2f8a0a18-7160-4f20-b3bb-c00727de6e22\").style.display = \"none\";</script>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "// The base plot with the legend in the center\n",
    "\n",
    "p + ggtitle(\"Default legend position\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "35fe57ee-39c7-4820-80e0-f98e0fa58def",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/plot+json": {
       "apply_color_scheme": true,
       "output": {
        "figures": [
         {
          "data": {
           "Color": [
            "A",
            "B",
            "C"
           ],
           "x": [
            0,
            0.4,
            1
           ],
           "y": [
            0,
            0.6,
            1
           ]
          },
          "data_meta": {
           "series_annotations": [
            {
             "column": "x",
             "type": "float"
            },
            {
             "column": "y",
             "type": "float"
            },
            {
             "column": "Color",
             "type": "str"
            }
           ]
          },
          "ggsize": {
           "height": 300,
           "width": 500
          },
          "ggtitle": {
           "text": "Align legend to the top"
          },
          "kind": "plot",
          "layers": [
           {
            "geom": "point",
            "mapping": {},
            "position": "identity",
            "stat": "identity"
           }
          ],
          "mapping": {
           "color": "Color",
           "x": "x",
           "y": "y"
          },
          "scales": [],
          "theme": {
           "legend_justification": "top",
           "plot_title": {
            "blank": false,
            "hjust": 0.5
           }
          }
         },
         {
          "data": {
           "Color": [
            "A",
            "B",
            "C"
           ],
           "x": [
            0,
            0.4,
            1
           ],
           "y": [
            0,
            0.6,
            1
           ]
          },
          "data_meta": {
           "series_annotations": [
            {
             "column": "x",
             "type": "float"
            },
            {
             "column": "y",
             "type": "float"
            },
            {
             "column": "Color",
             "type": "str"
            }
           ]
          },
          "ggsize": {
           "height": 300,
           "width": 500
          },
          "ggtitle": {
           "text": "Align legend to the bottom"
          },
          "kind": "plot",
          "layers": [
           {
            "geom": "point",
            "mapping": {},
            "position": "identity",
            "stat": "identity"
           }
          ],
          "mapping": {
           "color": "Color",
           "x": "x",
           "y": "y"
          },
          "scales": [],
          "theme": {
           "legend_justification": "bottom",
           "plot_title": {
            "blank": false,
            "hjust": 0.5
           }
          }
         }
        ],
        "kind": "subplots",
        "layout": {
         "align": false,
         "fit": true,
         "name": "grid",
         "ncol": 2,
         "nrow": 1
        }
       },
       "output_type": "lets_plot_spec",
       "swing_enabled": true
      },
      "text/html": [
       "   <div id=\"GqjZ5s\" ></div>\n",
       "   <script type=\"text/javascript\" data-lets-plot-script=\"plot\">\n",
       "   \n",
       "   (function() {\n",
       "   // ----------\n",
       "   \n",
       "   const forceImmediateRender = false;\n",
       "   const responsive = false;\n",
       "   \n",
       "   let sizing = {\n",
       "       width_mode: \"MIN\",\n",
       "       height_mode: \"SCALED\",\n",
       "       width: null, \n",
       "       height: null \n",
       "   };\n",
       "   \n",
       "   const preferredWidth = document.body.dataset.letsPlotPreferredWidth;\n",
       "   if (preferredWidth !== undefined) {\n",
       "       sizing = {\n",
       "           width_mode: 'FIXED',\n",
       "           height_mode: 'SCALED',\n",
       "           width: parseFloat(preferredWidth)\n",
       "       };\n",
       "   }\n",
       "   \n",
       "   const containerDiv = document.getElementById(\"GqjZ5s\");\n",
       "   let fig = null;\n",
       "   \n",
       "   function renderPlot() {\n",
       "       if (fig === null) {\n",
       "           const plotSpec = {\n",
       "\"layout\":{\n",
       "\"name\":\"grid\",\n",
       "\"ncol\":2,\n",
       "\"nrow\":1,\n",
       "\"fit\":true,\n",
       "\"align\":false\n",
       "},\n",
       "\"figures\":[{\n",
       "\"ggtitle\":{\n",
       "\"text\":\"Align legend to the top\"\n",
       "},\n",
       "\"mapping\":{\n",
       "\"x\":\"x\",\n",
       "\"y\":\"y\",\n",
       "\"color\":\"Color\"\n",
       "},\n",
       "\"data\":{\n",
       "\"Color\":[\"A\",\"B\",\"C\"],\n",
       "\"x\":[0.0,0.4,1.0],\n",
       "\"y\":[0.0,0.6,1.0]\n",
       "},\n",
       "\"ggsize\":{\n",
       "\"width\":500.0,\n",
       "\"height\":300.0\n",
       "},\n",
       "\"kind\":\"plot\",\n",
       "\"scales\":[],\n",
       "\"layers\":[{\n",
       "\"mapping\":{\n",
       "},\n",
       "\"stat\":\"identity\",\n",
       "\"position\":\"identity\",\n",
       "\"geom\":\"point\",\n",
       "\"data\":{\n",
       "}\n",
       "}],\n",
       "\"theme\":{\n",
       "\"plot_title\":{\n",
       "\"hjust\":0.5,\n",
       "\"blank\":false\n",
       "},\n",
       "\"legend_justification\":\"top\"\n",
       "},\n",
       "\"data_meta\":{\n",
       "\"series_annotations\":[{\n",
       "\"type\":\"float\",\n",
       "\"column\":\"x\"\n",
       "},{\n",
       "\"type\":\"float\",\n",
       "\"column\":\"y\"\n",
       "},{\n",
       "\"type\":\"str\",\n",
       "\"column\":\"Color\"\n",
       "}]\n",
       "},\n",
       "\"spec_id\":\"3\"\n",
       "},{\n",
       "\"ggtitle\":{\n",
       "\"text\":\"Align legend to the bottom\"\n",
       "},\n",
       "\"mapping\":{\n",
       "\"x\":\"x\",\n",
       "\"y\":\"y\",\n",
       "\"color\":\"Color\"\n",
       "},\n",
       "\"data\":{\n",
       "\"Color\":[\"A\",\"B\",\"C\"],\n",
       "\"x\":[0.0,0.4,1.0],\n",
       "\"y\":[0.0,0.6,1.0]\n",
       "},\n",
       "\"ggsize\":{\n",
       "\"width\":500.0,\n",
       "\"height\":300.0\n",
       "},\n",
       "\"kind\":\"plot\",\n",
       "\"scales\":[],\n",
       "\"layers\":[{\n",
       "\"mapping\":{\n",
       "},\n",
       "\"stat\":\"identity\",\n",
       "\"position\":\"identity\",\n",
       "\"geom\":\"point\",\n",
       "\"data\":{\n",
       "}\n",
       "}],\n",
       "\"theme\":{\n",
       "\"plot_title\":{\n",
       "\"hjust\":0.5,\n",
       "\"blank\":false\n",
       "},\n",
       "\"legend_justification\":\"bottom\"\n",
       "},\n",
       "\"data_meta\":{\n",
       "\"series_annotations\":[{\n",
       "\"type\":\"float\",\n",
       "\"column\":\"x\"\n",
       "},{\n",
       "\"type\":\"float\",\n",
       "\"column\":\"y\"\n",
       "},{\n",
       "\"type\":\"str\",\n",
       "\"column\":\"Color\"\n",
       "}]\n",
       "},\n",
       "\"spec_id\":\"4\"\n",
       "}],\n",
       "\"kind\":\"subplots\"\n",
       "};\n",
       "           window.letsPlotCall(function() { fig = LetsPlot.buildPlotFromProcessedSpecs(plotSpec, containerDiv, sizing); });\n",
       "       } else {\n",
       "           fig.updateView({});\n",
       "       }\n",
       "   }\n",
       "   \n",
       "   const renderImmediately = \n",
       "       forceImmediateRender || (\n",
       "           sizing.width_mode === 'FIXED' && \n",
       "           (sizing.height_mode === 'FIXED' || sizing.height_mode === 'SCALED')\n",
       "       );\n",
       "   \n",
       "   if (renderImmediately) {\n",
       "       renderPlot();\n",
       "   }\n",
       "   \n",
       "   if (!renderImmediately || responsive) {\n",
       "       // Set up observer for initial sizing or continuous monitoring\n",
       "       var observer = new ResizeObserver(function(entries) {\n",
       "           for (let entry of entries) {\n",
       "               if (entry.contentBoxSize && \n",
       "                   entry.contentBoxSize[0].inlineSize > 0) {\n",
       "                   if (!responsive && observer) {\n",
       "                       observer.disconnect();\n",
       "                       observer = null;\n",
       "                   }\n",
       "                   renderPlot();\n",
       "                   if (!responsive) {\n",
       "                       break;\n",
       "                   }\n",
       "               }\n",
       "           }\n",
       "       });\n",
       "       \n",
       "       observer.observe(containerDiv);\n",
       "   }\n",
       "   \n",
       "   // ----------\n",
       "   })();\n",
       "   \n",
       "   </script>                <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" display=\"block\" class=\"plt-container\" id=86496089-06e8-40d4-8d87-a4549735731a width=\"100%\" height=\"100%\" style=\"max-width: 900.0px; max-height: 400.0px;\" viewBox=\"0 0 900.0 400.0\" preserveAspectRatio=\"xMinYMin meet\">\n",
       "  <style type=\"text/css\">\n",
       "  .plt-container {\n",
       "   font-family: sans-serif;\n",
       "   user-select: none;\n",
       "   -webkit-user-select: none;\n",
       "   -moz-user-select: none;\n",
       "   -ms-user-select: none;\n",
       "}\n",
       "text {\n",
       "   text-rendering: optimizeLegibility;\n",
       "}\n",
       "#pMj32ve .plot-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 16.0px;\n",
       "\n",
       "}\n",
       "#pMj32ve .plot-subtitle {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pMj32ve .plot-caption {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pMj32ve .hyperlink-element {\n",
       "fill: #118ed8;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "\n",
       "}\n",
       "#pMj32ve .legend-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pMj32ve .legend-item {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pMj32ve .axis-title-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pMj32ve .axis-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       ".axis-tooltip-text-x {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pMj32ve .axis-title-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pMj32ve .axis-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       ".axis-tooltip-text-y {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pMj32ve .facet-strip-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pMj32ve .facet-strip-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       ".tooltip-text {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       ".tooltip-title {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       ".tooltip-label {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "\n",
       "  </style>\n",
       "  <g id=\"pMj32ve\">\n",
       "    <rect x=\"0.0\" y=\"0.0\" height=\"400.0\" width=\"900.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" stroke-width=\"0.0\">\n",
       "    </rect>\n",
       "  </g>\n",
       "  <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" display=\"block\" class=\"plt-container\" width=\"442.0\" height=\"388.0\" x=\"6.0\" y=\"6.0\">\n",
       "    <style type=\"text/css\">\n",
       "    .plt-container {\n",
       "   font-family: sans-serif;\n",
       "   user-select: none;\n",
       "   -webkit-user-select: none;\n",
       "   -moz-user-select: none;\n",
       "   -ms-user-select: none;\n",
       "}\n",
       "text {\n",
       "   text-rendering: optimizeLegibility;\n",
       "}\n",
       "#p24EeYZ .plot-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 16.0px;\n",
       "\n",
       "}\n",
       "#p24EeYZ .plot-subtitle {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#p24EeYZ .plot-caption {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#p24EeYZ .hyperlink-element {\n",
       "fill: #118ed8;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "\n",
       "}\n",
       "#p24EeYZ .legend-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#p24EeYZ .legend-item {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#p24EeYZ .axis-title-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#p24EeYZ .axis-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dTbHtcD .axis-tooltip-text-x {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#p24EeYZ .axis-title-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#p24EeYZ .axis-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dTbHtcD .axis-tooltip-text-y {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#p24EeYZ .facet-strip-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#p24EeYZ .facet-strip-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dTbHtcD .tooltip-text {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dTbHtcD .tooltip-title {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dTbHtcD .tooltip-label {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "\n",
       "    </style>\n",
       "    <g id=\"p24EeYZ\">\n",
       "      <path fill-rule=\"evenodd\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" d=\"M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z\">\n",
       "      </path>\n",
       "      <g transform=\"translate(21.0 22.0 ) \">\n",
       "        <g>\n",
       "          <g transform=\"translate(23.034701220281416 0.0 ) \">\n",
       "            <g>\n",
       "              <line x1=\"15.476267774637689\" y1=\"0.0\" x2=\"15.476267774637689\" y2=\"326.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"77.38133887318844\" y1=\"0.0\" x2=\"77.38133887318844\" y2=\"326.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"139.2864099717392\" y1=\"0.0\" x2=\"139.2864099717392\" y2=\"326.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"201.19148107028997\" y1=\"0.0\" x2=\"201.19148107028997\" y2=\"326.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"263.09655216884073\" y1=\"0.0\" x2=\"263.09655216884073\" y2=\"326.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"325.00162326739144\" y1=\"0.0\" x2=\"325.00162326739144\" y2=\"326.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(23.034701220281416 0.0 ) \">\n",
       "            <g>\n",
       "              <line x1=\"0.0\" y1=\"311.1818181818182\" x2=\"340.47789104202917\" y2=\"311.1818181818182\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"0.0\" y1=\"251.90909090909093\" x2=\"340.47789104202917\" y2=\"251.90909090909093\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"0.0\" y1=\"192.63636363636365\" x2=\"340.47789104202917\" y2=\"192.63636363636365\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"0.0\" y1=\"133.36363636363637\" x2=\"340.47789104202917\" y2=\"133.36363636363637\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"0.0\" y1=\"74.09090909090912\" x2=\"340.47789104202917\" y2=\"74.09090909090912\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"0.0\" y1=\"14.81818181818187\" x2=\"340.47789104202917\" y2=\"14.81818181818187\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "        <g clip-path=\"url(#cuUkBy9)\" clip-bounds-jfx=\"[rect (23.034701220281416, 0.0), (340.47789104202917, 326.0)]\">\n",
       "          <g transform=\"translate(23.034701220281416 0.0 ) \">\n",
       "            <g>\n",
       "              <g>\n",
       "                <g>\n",
       "                  <g >\n",
       "                    <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"15.476267774637689\" cy=\"311.1818181818182\" r=\"3.3000000000000003\" />\n",
       "                    <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"139.2864099717392\" cy=\"133.3636363636364\" r=\"3.3000000000000003\" />\n",
       "                    <circle fill=\"#4daf4a\" stroke=\"#4daf4a\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"325.00162326739144\" cy=\"14.81818181818187\" r=\"3.3000000000000003\" />\n",
       "                  </g>\n",
       "                </g>\n",
       "              </g>\n",
       "            </g>\n",
       "          </g>\n",
       "          <defs>\n",
       "            <clipPath id=\"cuUkBy9\">\n",
       "              <rect x=\"23.034701220281416\" y=\"0.0\" width=\"340.47789104202917\" height=\"326.0\">\n",
       "              </rect>\n",
       "            </clipPath>\n",
       "          </defs>\n",
       "        </g>\n",
       "        <g>\n",
       "          <g transform=\"translate(23.034701220281416 326.0 ) \">\n",
       "            <g transform=\"translate(15.476267774637689 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>0</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(77.38133887318844 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>0.2</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(139.2864099717392 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>0.4</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(201.19148107028997 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>0.6</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(263.09655216884073 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>0.8</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(325.00162326739144 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>1</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <line x1=\"0.0\" y1=\"0.0\" x2=\"340.47789104202917\" y2=\"0.0\" stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\">\n",
       "            </line>\n",
       "          </g>\n",
       "          <g transform=\"translate(23.034701220281416 0.0 ) \">\n",
       "            <g transform=\"translate(0.0 311.1818181818182 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>0</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 251.90909090909093 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>0.2</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 192.63636363636365 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>0.4</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 133.36363636363637 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>0.6</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 74.09090909090912 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>0.8</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 14.81818181818187 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>1</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "      </g>\n",
       "      <g transform=\"translate(214.273646741296 15.8 ) \">\n",
       "        <text style=\"font-size:16.0px;\" y=\"0.0\" class=\"plot-title\" text-anchor=\"middle\">\n",
       "          <tspan>Align legend to the top</tspan>\n",
       "        </text>\n",
       "      </g>\n",
       "      <g transform=\"translate(15.0 185.0 ) rotate(-90.0 ) \">\n",
       "        <text style=\"font-size:15.0px;\" y=\"0.0\" class=\"axis-title-y\" text-anchor=\"middle\">\n",
       "          <tspan>y</tspan>\n",
       "        </text>\n",
       "      </g>\n",
       "      <g transform=\"translate(214.273646741296 382.0 ) \">\n",
       "        <text style=\"font-size:15.0px;\" y=\"0.0\" class=\"axis-title-x\" text-anchor=\"middle\">\n",
       "          <tspan>x</tspan>\n",
       "        </text>\n",
       "      </g>\n",
       "      <g transform=\"translate(387.51259226231053 22.0 ) \">\n",
       "        <rect x=\"0.0\" y=\"0.0\" height=\"101.5\" width=\"51.487407737689445\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" stroke-width=\"0.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\">\n",
       "        </rect>\n",
       "        <g transform=\"translate(5.0 5.0 ) \">\n",
       "          <g transform=\"translate(0.0 12.0 ) \">\n",
       "            <text style=\"font-size:15.0px;\" y=\"0.0\" class=\"legend-title\">\n",
       "              <tspan>Color</tspan>\n",
       "            </text>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 22.5 ) \">\n",
       "            <g transform=\"\">\n",
       "              <g>\n",
       "                <g transform=\"translate(1.0 1.0 ) \">\n",
       "                  <g>\n",
       "                    <g >\n",
       "                      <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"10.5\" cy=\"10.5\" r=\"5.5\" />\n",
       "                    </g>\n",
       "                  </g>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"translate(26.9903027277341 11.5 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"legend-item\" dy=\"0.35em\">\n",
       "                  <tspan>A</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 23.0 ) \">\n",
       "              <g>\n",
       "                <g transform=\"translate(1.0 1.0 ) \">\n",
       "                  <g>\n",
       "                    <g >\n",
       "                      <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"10.5\" cy=\"10.5\" r=\"5.5\" />\n",
       "                    </g>\n",
       "                  </g>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"translate(26.9903027277341 11.5 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"legend-item\" dy=\"0.35em\">\n",
       "                  <tspan>B</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 46.0 ) \">\n",
       "              <g>\n",
       "                <g transform=\"translate(1.0 1.0 ) \">\n",
       "                  <g>\n",
       "                    <g >\n",
       "                      <circle fill=\"#4daf4a\" stroke=\"#4daf4a\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"10.5\" cy=\"10.5\" r=\"5.5\" />\n",
       "                    </g>\n",
       "                  </g>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"translate(26.9903027277341 11.5 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"legend-item\" dy=\"0.35em\">\n",
       "                  <tspan>C</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "      </g>\n",
       "      <path fill=\"rgb(0,0,0)\" fill-opacity=\"0.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" stroke-width=\"0.0\" d=\"M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z\" pointer-events=\"none\">\n",
       "      </path>\n",
       "    </g>\n",
       "    <g id=\"dTbHtcD\">\n",
       "    </g>\n",
       "  </svg>\n",
       "  <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" display=\"block\" class=\"plt-container\" width=\"442.0\" height=\"388.0\" x=\"452.0\" y=\"6.0\">\n",
       "    <style type=\"text/css\">\n",
       "    .plt-container {\n",
       "   font-family: sans-serif;\n",
       "   user-select: none;\n",
       "   -webkit-user-select: none;\n",
       "   -moz-user-select: none;\n",
       "   -ms-user-select: none;\n",
       "}\n",
       "text {\n",
       "   text-rendering: optimizeLegibility;\n",
       "}\n",
       "#pjTf38Y .plot-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 16.0px;\n",
       "\n",
       "}\n",
       "#pjTf38Y .plot-subtitle {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pjTf38Y .plot-caption {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pjTf38Y .hyperlink-element {\n",
       "fill: #118ed8;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "\n",
       "}\n",
       "#pjTf38Y .legend-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pjTf38Y .legend-item {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pjTf38Y .axis-title-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pjTf38Y .axis-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dlnQRbE .axis-tooltip-text-x {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pjTf38Y .axis-title-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pjTf38Y .axis-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dlnQRbE .axis-tooltip-text-y {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pjTf38Y .facet-strip-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pjTf38Y .facet-strip-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dlnQRbE .tooltip-text {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dlnQRbE .tooltip-title {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dlnQRbE .tooltip-label {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "\n",
       "    </style>\n",
       "    <g id=\"pjTf38Y\">\n",
       "      <path fill-rule=\"evenodd\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" d=\"M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z\">\n",
       "      </path>\n",
       "      <g transform=\"translate(21.0 22.0 ) \">\n",
       "        <g>\n",
       "          <g transform=\"translate(23.034701220281416 0.0 ) \">\n",
       "            <g>\n",
       "              <line x1=\"15.476267774637689\" y1=\"0.0\" x2=\"15.476267774637689\" y2=\"326.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"77.38133887318844\" y1=\"0.0\" x2=\"77.38133887318844\" y2=\"326.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"139.2864099717392\" y1=\"0.0\" x2=\"139.2864099717392\" y2=\"326.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"201.19148107028997\" y1=\"0.0\" x2=\"201.19148107028997\" y2=\"326.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"263.09655216884073\" y1=\"0.0\" x2=\"263.09655216884073\" y2=\"326.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"325.00162326739144\" y1=\"0.0\" x2=\"325.00162326739144\" y2=\"326.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(23.034701220281416 0.0 ) \">\n",
       "            <g>\n",
       "              <line x1=\"0.0\" y1=\"311.1818181818182\" x2=\"340.47789104202917\" y2=\"311.1818181818182\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"0.0\" y1=\"251.90909090909093\" x2=\"340.47789104202917\" y2=\"251.90909090909093\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"0.0\" y1=\"192.63636363636365\" x2=\"340.47789104202917\" y2=\"192.63636363636365\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"0.0\" y1=\"133.36363636363637\" x2=\"340.47789104202917\" y2=\"133.36363636363637\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"0.0\" y1=\"74.09090909090912\" x2=\"340.47789104202917\" y2=\"74.09090909090912\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"0.0\" y1=\"14.81818181818187\" x2=\"340.47789104202917\" y2=\"14.81818181818187\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "        <g clip-path=\"url(#cnIrLOa)\" clip-bounds-jfx=\"[rect (23.034701220281416, 0.0), (340.47789104202917, 326.0)]\">\n",
       "          <g transform=\"translate(23.034701220281416 0.0 ) \">\n",
       "            <g>\n",
       "              <g>\n",
       "                <g>\n",
       "                  <g >\n",
       "                    <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"15.476267774637689\" cy=\"311.1818181818182\" r=\"3.3000000000000003\" />\n",
       "                    <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"139.2864099717392\" cy=\"133.3636363636364\" r=\"3.3000000000000003\" />\n",
       "                    <circle fill=\"#4daf4a\" stroke=\"#4daf4a\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"325.00162326739144\" cy=\"14.81818181818187\" r=\"3.3000000000000003\" />\n",
       "                  </g>\n",
       "                </g>\n",
       "              </g>\n",
       "            </g>\n",
       "          </g>\n",
       "          <defs>\n",
       "            <clipPath id=\"cnIrLOa\">\n",
       "              <rect x=\"23.034701220281416\" y=\"0.0\" width=\"340.47789104202917\" height=\"326.0\">\n",
       "              </rect>\n",
       "            </clipPath>\n",
       "          </defs>\n",
       "        </g>\n",
       "        <g>\n",
       "          <g transform=\"translate(23.034701220281416 326.0 ) \">\n",
       "            <g transform=\"translate(15.476267774637689 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>0</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(77.38133887318844 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>0.2</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(139.2864099717392 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>0.4</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(201.19148107028997 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>0.6</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(263.09655216884073 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>0.8</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(325.00162326739144 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>1</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <line x1=\"0.0\" y1=\"0.0\" x2=\"340.47789104202917\" y2=\"0.0\" stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\">\n",
       "            </line>\n",
       "          </g>\n",
       "          <g transform=\"translate(23.034701220281416 0.0 ) \">\n",
       "            <g transform=\"translate(0.0 311.1818181818182 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>0</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 251.90909090909093 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>0.2</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 192.63636363636365 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>0.4</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 133.36363636363637 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>0.6</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 74.09090909090912 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>0.8</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 14.81818181818187 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>1</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "      </g>\n",
       "      <g transform=\"translate(214.273646741296 15.8 ) \">\n",
       "        <text style=\"font-size:16.0px;\" y=\"0.0\" class=\"plot-title\" text-anchor=\"middle\">\n",
       "          <tspan>Align legend to the bottom</tspan>\n",
       "        </text>\n",
       "      </g>\n",
       "      <g transform=\"translate(15.0 185.0 ) rotate(-90.0 ) \">\n",
       "        <text style=\"font-size:15.0px;\" y=\"0.0\" class=\"axis-title-y\" text-anchor=\"middle\">\n",
       "          <tspan>y</tspan>\n",
       "        </text>\n",
       "      </g>\n",
       "      <g transform=\"translate(214.273646741296 382.0 ) \">\n",
       "        <text style=\"font-size:15.0px;\" y=\"0.0\" class=\"axis-title-x\" text-anchor=\"middle\">\n",
       "          <tspan>x</tspan>\n",
       "        </text>\n",
       "      </g>\n",
       "      <g transform=\"translate(387.51259226231053 246.5 ) \">\n",
       "        <rect x=\"0.0\" y=\"0.0\" height=\"101.5\" width=\"51.487407737689445\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" stroke-width=\"0.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\">\n",
       "        </rect>\n",
       "        <g transform=\"translate(5.0 5.0 ) \">\n",
       "          <g transform=\"translate(0.0 12.0 ) \">\n",
       "            <text style=\"font-size:15.0px;\" y=\"0.0\" class=\"legend-title\">\n",
       "              <tspan>Color</tspan>\n",
       "            </text>\n",
       "          </g>\n",
       "          <g transform=\"translate(0.0 22.5 ) \">\n",
       "            <g transform=\"\">\n",
       "              <g>\n",
       "                <g transform=\"translate(1.0 1.0 ) \">\n",
       "                  <g>\n",
       "                    <g >\n",
       "                      <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"10.5\" cy=\"10.5\" r=\"5.5\" />\n",
       "                    </g>\n",
       "                  </g>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"translate(26.9903027277341 11.5 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"legend-item\" dy=\"0.35em\">\n",
       "                  <tspan>A</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 23.0 ) \">\n",
       "              <g>\n",
       "                <g transform=\"translate(1.0 1.0 ) \">\n",
       "                  <g>\n",
       "                    <g >\n",
       "                      <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"10.5\" cy=\"10.5\" r=\"5.5\" />\n",
       "                    </g>\n",
       "                  </g>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"translate(26.9903027277341 11.5 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"legend-item\" dy=\"0.35em\">\n",
       "                  <tspan>B</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 46.0 ) \">\n",
       "              <g>\n",
       "                <g transform=\"translate(1.0 1.0 ) \">\n",
       "                  <g>\n",
       "                    <g >\n",
       "                      <circle fill=\"#4daf4a\" stroke=\"#4daf4a\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"10.5\" cy=\"10.5\" r=\"5.5\" />\n",
       "                    </g>\n",
       "                  </g>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"translate(26.9903027277341 11.5 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"legend-item\" dy=\"0.35em\">\n",
       "                  <tspan>C</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "      </g>\n",
       "      <path fill=\"rgb(0,0,0)\" fill-opacity=\"0.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" stroke-width=\"0.0\" d=\"M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z\" pointer-events=\"none\">\n",
       "      </path>\n",
       "    </g>\n",
       "    <g id=\"dlnQRbE\">\n",
       "    </g>\n",
       "  </svg>\n",
       "</svg>\n",
       "                <script>document.getElementById(\"86496089-06e8-40d4-8d87-a4549735731a\").style.display = \"none\";</script>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "// Align the legend to the top or bottom\n",
    "\n",
    "gggrid(\n",
    "    listOf(\n",
    "        p + theme().legendJustificationTop() + ggtitle(\"Align legend to the top\"),\n",
    "        p + theme().legendJustificationBottom() + ggtitle(\"Align legend to the bottom\")\n",
    "    ),\n",
    "    ncol = 2\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "2f6b3ad4-dc2e-453e-9363-048bc7c6c095",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/plot+json": {
       "apply_color_scheme": true,
       "output": {
        "figures": [
         {
          "data": {
           "Color": [
            "A",
            "B",
            "C"
           ],
           "x": [
            0,
            0.4,
            1
           ],
           "y": [
            0,
            0.6,
            1
           ]
          },
          "data_meta": {
           "series_annotations": [
            {
             "column": "x",
             "type": "float"
            },
            {
             "column": "y",
             "type": "float"
            },
            {
             "column": "Color",
             "type": "str"
            }
           ]
          },
          "ggsize": {
           "height": 300,
           "width": 500
          },
          "ggtitle": {
           "text": "Align legend to the left"
          },
          "kind": "plot",
          "layers": [
           {
            "geom": "point",
            "mapping": {},
            "position": "identity",
            "stat": "identity"
           }
          ],
          "mapping": {
           "color": "Color",
           "x": "x",
           "y": "y"
          },
          "scales": [],
          "theme": {
           "legend_justification": "left",
           "legend_position": "bottom",
           "plot_title": {
            "blank": false,
            "hjust": 0.5
           }
          }
         },
         {
          "data": {
           "Color": [
            "A",
            "B",
            "C"
           ],
           "x": [
            0,
            0.4,
            1
           ],
           "y": [
            0,
            0.6,
            1
           ]
          },
          "data_meta": {
           "series_annotations": [
            {
             "column": "x",
             "type": "float"
            },
            {
             "column": "y",
             "type": "float"
            },
            {
             "column": "Color",
             "type": "str"
            }
           ]
          },
          "ggsize": {
           "height": 300,
           "width": 500
          },
          "ggtitle": {
           "text": "Align legend to the right"
          },
          "kind": "plot",
          "layers": [
           {
            "geom": "point",
            "mapping": {},
            "position": "identity",
            "stat": "identity"
           }
          ],
          "mapping": {
           "color": "Color",
           "x": "x",
           "y": "y"
          },
          "scales": [],
          "theme": {
           "legend_justification": "right",
           "legend_position": "bottom",
           "plot_title": {
            "blank": false,
            "hjust": 0.5
           }
          }
         }
        ],
        "kind": "subplots",
        "layout": {
         "align": false,
         "fit": true,
         "name": "grid",
         "ncol": 2,
         "nrow": 1
        }
       },
       "output_type": "lets_plot_spec",
       "swing_enabled": true
      },
      "text/html": [
       "   <div id=\"LoSbGN\" ></div>\n",
       "   <script type=\"text/javascript\" data-lets-plot-script=\"plot\">\n",
       "   \n",
       "   (function() {\n",
       "   // ----------\n",
       "   \n",
       "   const forceImmediateRender = false;\n",
       "   const responsive = false;\n",
       "   \n",
       "   let sizing = {\n",
       "       width_mode: \"MIN\",\n",
       "       height_mode: \"SCALED\",\n",
       "       width: null, \n",
       "       height: null \n",
       "   };\n",
       "   \n",
       "   const preferredWidth = document.body.dataset.letsPlotPreferredWidth;\n",
       "   if (preferredWidth !== undefined) {\n",
       "       sizing = {\n",
       "           width_mode: 'FIXED',\n",
       "           height_mode: 'SCALED',\n",
       "           width: parseFloat(preferredWidth)\n",
       "       };\n",
       "   }\n",
       "   \n",
       "   const containerDiv = document.getElementById(\"LoSbGN\");\n",
       "   let fig = null;\n",
       "   \n",
       "   function renderPlot() {\n",
       "       if (fig === null) {\n",
       "           const plotSpec = {\n",
       "\"layout\":{\n",
       "\"name\":\"grid\",\n",
       "\"ncol\":2,\n",
       "\"nrow\":1,\n",
       "\"fit\":true,\n",
       "\"align\":false\n",
       "},\n",
       "\"figures\":[{\n",
       "\"ggtitle\":{\n",
       "\"text\":\"Align legend to the left\"\n",
       "},\n",
       "\"mapping\":{\n",
       "\"x\":\"x\",\n",
       "\"y\":\"y\",\n",
       "\"color\":\"Color\"\n",
       "},\n",
       "\"data\":{\n",
       "\"Color\":[\"A\",\"B\",\"C\"],\n",
       "\"x\":[0.0,0.4,1.0],\n",
       "\"y\":[0.0,0.6,1.0]\n",
       "},\n",
       "\"ggsize\":{\n",
       "\"width\":500.0,\n",
       "\"height\":300.0\n",
       "},\n",
       "\"kind\":\"plot\",\n",
       "\"scales\":[],\n",
       "\"layers\":[{\n",
       "\"mapping\":{\n",
       "},\n",
       "\"stat\":\"identity\",\n",
       "\"position\":\"identity\",\n",
       "\"geom\":\"point\",\n",
       "\"data\":{\n",
       "}\n",
       "}],\n",
       "\"theme\":{\n",
       "\"plot_title\":{\n",
       "\"hjust\":0.5,\n",
       "\"blank\":false\n",
       "},\n",
       "\"legend_position\":\"bottom\",\n",
       "\"legend_justification\":\"left\"\n",
       "},\n",
       "\"data_meta\":{\n",
       "\"series_annotations\":[{\n",
       "\"type\":\"float\",\n",
       "\"column\":\"x\"\n",
       "},{\n",
       "\"type\":\"float\",\n",
       "\"column\":\"y\"\n",
       "},{\n",
       "\"type\":\"str\",\n",
       "\"column\":\"Color\"\n",
       "}]\n",
       "},\n",
       "\"spec_id\":\"7\"\n",
       "},{\n",
       "\"ggtitle\":{\n",
       "\"text\":\"Align legend to the right\"\n",
       "},\n",
       "\"mapping\":{\n",
       "\"x\":\"x\",\n",
       "\"y\":\"y\",\n",
       "\"color\":\"Color\"\n",
       "},\n",
       "\"data\":{\n",
       "\"Color\":[\"A\",\"B\",\"C\"],\n",
       "\"x\":[0.0,0.4,1.0],\n",
       "\"y\":[0.0,0.6,1.0]\n",
       "},\n",
       "\"ggsize\":{\n",
       "\"width\":500.0,\n",
       "\"height\":300.0\n",
       "},\n",
       "\"kind\":\"plot\",\n",
       "\"scales\":[],\n",
       "\"layers\":[{\n",
       "\"mapping\":{\n",
       "},\n",
       "\"stat\":\"identity\",\n",
       "\"position\":\"identity\",\n",
       "\"geom\":\"point\",\n",
       "\"data\":{\n",
       "}\n",
       "}],\n",
       "\"theme\":{\n",
       "\"plot_title\":{\n",
       "\"hjust\":0.5,\n",
       "\"blank\":false\n",
       "},\n",
       "\"legend_position\":\"bottom\",\n",
       "\"legend_justification\":\"right\"\n",
       "},\n",
       "\"data_meta\":{\n",
       "\"series_annotations\":[{\n",
       "\"type\":\"float\",\n",
       "\"column\":\"x\"\n",
       "},{\n",
       "\"type\":\"float\",\n",
       "\"column\":\"y\"\n",
       "},{\n",
       "\"type\":\"str\",\n",
       "\"column\":\"Color\"\n",
       "}]\n",
       "},\n",
       "\"spec_id\":\"8\"\n",
       "}],\n",
       "\"kind\":\"subplots\"\n",
       "};\n",
       "           window.letsPlotCall(function() { fig = LetsPlot.buildPlotFromProcessedSpecs(plotSpec, containerDiv, sizing); });\n",
       "       } else {\n",
       "           fig.updateView({});\n",
       "       }\n",
       "   }\n",
       "   \n",
       "   const renderImmediately = \n",
       "       forceImmediateRender || (\n",
       "           sizing.width_mode === 'FIXED' && \n",
       "           (sizing.height_mode === 'FIXED' || sizing.height_mode === 'SCALED')\n",
       "       );\n",
       "   \n",
       "   if (renderImmediately) {\n",
       "       renderPlot();\n",
       "   }\n",
       "   \n",
       "   if (!renderImmediately || responsive) {\n",
       "       // Set up observer for initial sizing or continuous monitoring\n",
       "       var observer = new ResizeObserver(function(entries) {\n",
       "           for (let entry of entries) {\n",
       "               if (entry.contentBoxSize && \n",
       "                   entry.contentBoxSize[0].inlineSize > 0) {\n",
       "                   if (!responsive && observer) {\n",
       "                       observer.disconnect();\n",
       "                       observer = null;\n",
       "                   }\n",
       "                   renderPlot();\n",
       "                   if (!responsive) {\n",
       "                       break;\n",
       "                   }\n",
       "               }\n",
       "           }\n",
       "       });\n",
       "       \n",
       "       observer.observe(containerDiv);\n",
       "   }\n",
       "   \n",
       "   // ----------\n",
       "   })();\n",
       "   \n",
       "   </script>                <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" display=\"block\" class=\"plt-container\" id=9185a1dc-6e9b-4098-ba77-62981fb162ac width=\"100%\" height=\"100%\" style=\"max-width: 900.0px; max-height: 400.0px;\" viewBox=\"0 0 900.0 400.0\" preserveAspectRatio=\"xMinYMin meet\">\n",
       "  <style type=\"text/css\">\n",
       "  .plt-container {\n",
       "   font-family: sans-serif;\n",
       "   user-select: none;\n",
       "   -webkit-user-select: none;\n",
       "   -moz-user-select: none;\n",
       "   -ms-user-select: none;\n",
       "}\n",
       "text {\n",
       "   text-rendering: optimizeLegibility;\n",
       "}\n",
       "#pGO8V6L .plot-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 16.0px;\n",
       "\n",
       "}\n",
       "#pGO8V6L .plot-subtitle {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pGO8V6L .plot-caption {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pGO8V6L .hyperlink-element {\n",
       "fill: #118ed8;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "\n",
       "}\n",
       "#pGO8V6L .legend-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pGO8V6L .legend-item {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pGO8V6L .axis-title-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pGO8V6L .axis-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       ".axis-tooltip-text-x {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pGO8V6L .axis-title-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pGO8V6L .axis-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       ".axis-tooltip-text-y {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pGO8V6L .facet-strip-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pGO8V6L .facet-strip-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       ".tooltip-text {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       ".tooltip-title {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       ".tooltip-label {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "\n",
       "  </style>\n",
       "  <g id=\"pGO8V6L\">\n",
       "    <rect x=\"0.0\" y=\"0.0\" height=\"400.0\" width=\"900.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" stroke-width=\"0.0\">\n",
       "    </rect>\n",
       "  </g>\n",
       "  <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" display=\"block\" class=\"plt-container\" width=\"442.0\" height=\"388.0\" x=\"6.0\" y=\"6.0\">\n",
       "    <style type=\"text/css\">\n",
       "    .plt-container {\n",
       "   font-family: sans-serif;\n",
       "   user-select: none;\n",
       "   -webkit-user-select: none;\n",
       "   -moz-user-select: none;\n",
       "   -ms-user-select: none;\n",
       "}\n",
       "text {\n",
       "   text-rendering: optimizeLegibility;\n",
       "}\n",
       "#pzBqz9z .plot-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 16.0px;\n",
       "\n",
       "}\n",
       "#pzBqz9z .plot-subtitle {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pzBqz9z .plot-caption {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pzBqz9z .hyperlink-element {\n",
       "fill: #118ed8;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "\n",
       "}\n",
       "#pzBqz9z .legend-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pzBqz9z .legend-item {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pzBqz9z .axis-title-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pzBqz9z .axis-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dExlj4s .axis-tooltip-text-x {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pzBqz9z .axis-title-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pzBqz9z .axis-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dExlj4s .axis-tooltip-text-y {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pzBqz9z .facet-strip-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pzBqz9z .facet-strip-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dExlj4s .tooltip-text {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dExlj4s .tooltip-title {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#dExlj4s .tooltip-label {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "\n",
       "    </style>\n",
       "    <g id=\"pzBqz9z\">\n",
       "      <path fill-rule=\"evenodd\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" d=\"M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z\">\n",
       "      </path>\n",
       "      <g transform=\"translate(21.0 22.0 ) \">\n",
       "        <g>\n",
       "          <g transform=\"translate(23.034701220281416 0.0 ) \">\n",
       "            <g>\n",
       "              <line x1=\"17.81660448998721\" y1=\"0.0\" x2=\"17.81660448998721\" y2=\"293.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"89.08302244993605\" y1=\"0.0\" x2=\"89.08302244993605\" y2=\"293.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"160.3494404098849\" y1=\"0.0\" x2=\"160.3494404098849\" y2=\"293.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"231.61585836983375\" y1=\"0.0\" x2=\"231.61585836983375\" y2=\"293.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"302.88227632978254\" y1=\"0.0\" x2=\"302.88227632978254\" y2=\"293.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"374.14869428973134\" y1=\"0.0\" x2=\"374.14869428973134\" y2=\"293.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(23.034701220281416 0.0 ) \">\n",
       "            <g>\n",
       "              <line x1=\"0.0\" y1=\"279.6818181818182\" x2=\"391.9652987797186\" y2=\"279.6818181818182\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"0.0\" y1=\"226.40909090909093\" x2=\"391.9652987797186\" y2=\"226.40909090909093\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"0.0\" y1=\"173.13636363636365\" x2=\"391.9652987797186\" y2=\"173.13636363636365\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"0.0\" y1=\"119.86363636363637\" x2=\"391.9652987797186\" y2=\"119.86363636363637\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"0.0\" y1=\"66.59090909090912\" x2=\"391.9652987797186\" y2=\"66.59090909090912\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"0.0\" y1=\"13.31818181818187\" x2=\"391.9652987797186\" y2=\"13.31818181818187\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "        <g clip-path=\"url(#cllibec)\" clip-bounds-jfx=\"[rect (23.034701220281416, 0.0), (391.9652987797186, 293.0)]\">\n",
       "          <g transform=\"translate(23.034701220281416 0.0 ) \">\n",
       "            <g>\n",
       "              <g>\n",
       "                <g>\n",
       "                  <g >\n",
       "                    <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"17.81660448998721\" cy=\"279.6818181818182\" r=\"3.3000000000000003\" />\n",
       "                    <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"160.3494404098849\" cy=\"119.8636363636364\" r=\"3.3000000000000003\" />\n",
       "                    <circle fill=\"#4daf4a\" stroke=\"#4daf4a\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"374.14869428973134\" cy=\"13.31818181818187\" r=\"3.3000000000000003\" />\n",
       "                  </g>\n",
       "                </g>\n",
       "              </g>\n",
       "            </g>\n",
       "          </g>\n",
       "          <defs>\n",
       "            <clipPath id=\"cllibec\">\n",
       "              <rect x=\"23.034701220281416\" y=\"0.0\" width=\"391.9652987797186\" height=\"293.0\">\n",
       "              </rect>\n",
       "            </clipPath>\n",
       "          </defs>\n",
       "        </g>\n",
       "        <g>\n",
       "          <g transform=\"translate(23.034701220281416 293.0 ) \">\n",
       "            <g transform=\"translate(17.81660448998721 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>0</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(89.08302244993605 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>0.2</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(160.3494404098849 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>0.4</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(231.61585836983375 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>0.6</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(302.88227632978254 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>0.8</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(374.14869428973134 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>1</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <line x1=\"0.0\" y1=\"0.0\" x2=\"391.9652987797186\" y2=\"0.0\" stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\">\n",
       "            </line>\n",
       "          </g>\n",
       "          <g transform=\"translate(23.034701220281416 0.0 ) \">\n",
       "            <g transform=\"translate(0.0 279.6818181818182 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>0</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 226.40909090909093 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>0.2</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 173.13636363636365 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>0.4</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 119.86363636363637 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>0.6</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 66.59090909090912 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>0.8</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 13.31818181818187 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>1</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "      </g>\n",
       "      <g transform=\"translate(240.0173506101407 15.8 ) \">\n",
       "        <text style=\"font-size:16.0px;\" y=\"0.0\" class=\"plot-title\" text-anchor=\"middle\">\n",
       "          <tspan>Align legend to the left</tspan>\n",
       "        </text>\n",
       "      </g>\n",
       "      <g transform=\"translate(15.0 168.5 ) rotate(-90.0 ) \">\n",
       "        <text style=\"font-size:15.0px;\" y=\"0.0\" class=\"axis-title-y\" text-anchor=\"middle\">\n",
       "          <tspan>y</tspan>\n",
       "        </text>\n",
       "      </g>\n",
       "      <g transform=\"translate(240.0173506101407 349.0 ) \">\n",
       "        <text style=\"font-size:15.0px;\" y=\"0.0\" class=\"axis-title-x\" text-anchor=\"middle\">\n",
       "          <tspan>x</tspan>\n",
       "        </text>\n",
       "      </g>\n",
       "      <g transform=\"translate(44.03470122028142 352.0 ) \">\n",
       "        <rect x=\"0.0\" y=\"0.0\" height=\"33.0\" width=\"169.98160690547326\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" stroke-width=\"0.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\">\n",
       "        </rect>\n",
       "        <g transform=\"translate(5.0 5.0 ) \">\n",
       "          <g transform=\"translate(0.0 16.0 ) \">\n",
       "            <text style=\"font-size:15.0px;\" y=\"0.0\" class=\"legend-title\">\n",
       "              <tspan>Color</tspan>\n",
       "            </text>\n",
       "          </g>\n",
       "          <g transform=\"translate(41.487407737689445 0.0 ) \">\n",
       "            <g transform=\"\">\n",
       "              <g>\n",
       "                <g transform=\"translate(1.0 1.0 ) \">\n",
       "                  <g>\n",
       "                    <g >\n",
       "                      <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"10.5\" cy=\"10.5\" r=\"5.5\" />\n",
       "                    </g>\n",
       "                  </g>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"translate(26.9903027277341 11.5 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"legend-item\" dy=\"0.35em\">\n",
       "                  <tspan>A</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(40.828167298505974 0.0 ) \">\n",
       "              <g>\n",
       "                <g transform=\"translate(1.0 1.0 ) \">\n",
       "                  <g>\n",
       "                    <g >\n",
       "                      <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"10.5\" cy=\"10.5\" r=\"5.5\" />\n",
       "                    </g>\n",
       "                  </g>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"translate(26.9903027277341 11.5 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"legend-item\" dy=\"0.35em\">\n",
       "                  <tspan>B</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(81.65633459701195 0.0 ) \">\n",
       "              <g>\n",
       "                <g transform=\"translate(1.0 1.0 ) \">\n",
       "                  <g>\n",
       "                    <g >\n",
       "                      <circle fill=\"#4daf4a\" stroke=\"#4daf4a\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"10.5\" cy=\"10.5\" r=\"5.5\" />\n",
       "                    </g>\n",
       "                  </g>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"translate(26.9903027277341 11.5 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"legend-item\" dy=\"0.35em\">\n",
       "                  <tspan>C</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "      </g>\n",
       "      <path fill=\"rgb(0,0,0)\" fill-opacity=\"0.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" stroke-width=\"0.0\" d=\"M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z\" pointer-events=\"none\">\n",
       "      </path>\n",
       "    </g>\n",
       "    <g id=\"dExlj4s\">\n",
       "    </g>\n",
       "  </svg>\n",
       "  <svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" display=\"block\" class=\"plt-container\" width=\"442.0\" height=\"388.0\" x=\"452.0\" y=\"6.0\">\n",
       "    <style type=\"text/css\">\n",
       "    .plt-container {\n",
       "   font-family: sans-serif;\n",
       "   user-select: none;\n",
       "   -webkit-user-select: none;\n",
       "   -moz-user-select: none;\n",
       "   -ms-user-select: none;\n",
       "}\n",
       "text {\n",
       "   text-rendering: optimizeLegibility;\n",
       "}\n",
       "#pjm9ibD .plot-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 16.0px;\n",
       "\n",
       "}\n",
       "#pjm9ibD .plot-subtitle {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pjm9ibD .plot-caption {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pjm9ibD .hyperlink-element {\n",
       "fill: #118ed8;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "\n",
       "}\n",
       "#pjm9ibD .legend-title {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pjm9ibD .legend-item {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pjm9ibD .axis-title-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pjm9ibD .axis-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#djqQ5MM .axis-tooltip-text-x {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pjm9ibD .axis-title-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 15.0px;\n",
       "\n",
       "}\n",
       "#pjm9ibD .axis-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#djqQ5MM .axis-tooltip-text-y {\n",
       "fill: #ffffff;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pjm9ibD .facet-strip-text-x {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#pjm9ibD .facet-strip-text-y {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#djqQ5MM .tooltip-text {\n",
       "fill: #474747;\n",
       "font-weight: normal;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#djqQ5MM .tooltip-title {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "#djqQ5MM .tooltip-label {\n",
       "fill: #474747;\n",
       "font-weight: bold;\n",
       "font-style: normal;\n",
       "font-family: sans-serif;\n",
       "font-size: 13.0px;\n",
       "\n",
       "}\n",
       "\n",
       "    </style>\n",
       "    <g id=\"pjm9ibD\">\n",
       "      <path fill-rule=\"evenodd\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\" d=\"M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z\">\n",
       "      </path>\n",
       "      <g transform=\"translate(21.0 22.0 ) \">\n",
       "        <g>\n",
       "          <g transform=\"translate(23.034701220281416 0.0 ) \">\n",
       "            <g>\n",
       "              <line x1=\"17.81660448998721\" y1=\"0.0\" x2=\"17.81660448998721\" y2=\"293.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"89.08302244993605\" y1=\"0.0\" x2=\"89.08302244993605\" y2=\"293.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"160.3494404098849\" y1=\"0.0\" x2=\"160.3494404098849\" y2=\"293.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"231.61585836983375\" y1=\"0.0\" x2=\"231.61585836983375\" y2=\"293.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"302.88227632978254\" y1=\"0.0\" x2=\"302.88227632978254\" y2=\"293.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"374.14869428973134\" y1=\"0.0\" x2=\"374.14869428973134\" y2=\"293.0\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "            </g>\n",
       "          </g>\n",
       "          <g transform=\"translate(23.034701220281416 0.0 ) \">\n",
       "            <g>\n",
       "              <line x1=\"0.0\" y1=\"279.6818181818182\" x2=\"391.9652987797186\" y2=\"279.6818181818182\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"0.0\" y1=\"226.40909090909093\" x2=\"391.9652987797186\" y2=\"226.40909090909093\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"0.0\" y1=\"173.13636363636365\" x2=\"391.9652987797186\" y2=\"173.13636363636365\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"0.0\" y1=\"119.86363636363637\" x2=\"391.9652987797186\" y2=\"119.86363636363637\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"0.0\" y1=\"66.59090909090912\" x2=\"391.9652987797186\" y2=\"66.59090909090912\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "              <line x1=\"0.0\" y1=\"13.31818181818187\" x2=\"391.9652987797186\" y2=\"13.31818181818187\" stroke=\"rgb(233,233,233)\" stroke-opacity=\"1.0\" stroke-width=\"1.0\" fill=\"none\">\n",
       "              </line>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "        <g clip-path=\"url(#cGIBfdj)\" clip-bounds-jfx=\"[rect (23.034701220281416, 0.0), (391.9652987797186, 293.0)]\">\n",
       "          <g transform=\"translate(23.034701220281416 0.0 ) \">\n",
       "            <g>\n",
       "              <g>\n",
       "                <g>\n",
       "                  <g >\n",
       "                    <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"17.81660448998721\" cy=\"279.6818181818182\" r=\"3.3000000000000003\" />\n",
       "                    <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"160.3494404098849\" cy=\"119.8636363636364\" r=\"3.3000000000000003\" />\n",
       "                    <circle fill=\"#4daf4a\" stroke=\"#4daf4a\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"374.14869428973134\" cy=\"13.31818181818187\" r=\"3.3000000000000003\" />\n",
       "                  </g>\n",
       "                </g>\n",
       "              </g>\n",
       "            </g>\n",
       "          </g>\n",
       "          <defs>\n",
       "            <clipPath id=\"cGIBfdj\">\n",
       "              <rect x=\"23.034701220281416\" y=\"0.0\" width=\"391.9652987797186\" height=\"293.0\">\n",
       "              </rect>\n",
       "            </clipPath>\n",
       "          </defs>\n",
       "        </g>\n",
       "        <g>\n",
       "          <g transform=\"translate(23.034701220281416 293.0 ) \">\n",
       "            <g transform=\"translate(17.81660448998721 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>0</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(89.08302244993605 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>0.2</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(160.3494404098849 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>0.4</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(231.61585836983375 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>0.6</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(302.88227632978254 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>0.8</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(374.14869428973134 0.0 ) \">\n",
       "              <line stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" x2=\"0.0\" y2=\"4.0\">\n",
       "              </line>\n",
       "              <g transform=\"translate(0.0 6.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-x\" text-anchor=\"middle\" dy=\"0.7em\">\n",
       "                  <tspan>1</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <line x1=\"0.0\" y1=\"0.0\" x2=\"391.9652987797186\" y2=\"0.0\" stroke-width=\"1.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\">\n",
       "            </line>\n",
       "          </g>\n",
       "          <g transform=\"translate(23.034701220281416 0.0 ) \">\n",
       "            <g transform=\"translate(0.0 279.6818181818182 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>0</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 226.40909090909093 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>0.2</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 173.13636363636365 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>0.4</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 119.86363636363637 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>0.6</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 66.59090909090912 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>0.8</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(0.0 13.31818181818187 ) \">\n",
       "              <g transform=\"translate(-2.0 0.0 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"axis-text-y\" text-anchor=\"end\" dy=\"0.35em\">\n",
       "                  <tspan>1</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "      </g>\n",
       "      <g transform=\"translate(240.0173506101407 15.8 ) \">\n",
       "        <text style=\"font-size:16.0px;\" y=\"0.0\" class=\"plot-title\" text-anchor=\"middle\">\n",
       "          <tspan>Align legend to the right</tspan>\n",
       "        </text>\n",
       "      </g>\n",
       "      <g transform=\"translate(15.0 168.5 ) rotate(-90.0 ) \">\n",
       "        <text style=\"font-size:15.0px;\" y=\"0.0\" class=\"axis-title-y\" text-anchor=\"middle\">\n",
       "          <tspan>y</tspan>\n",
       "        </text>\n",
       "      </g>\n",
       "      <g transform=\"translate(240.0173506101407 349.0 ) \">\n",
       "        <text style=\"font-size:15.0px;\" y=\"0.0\" class=\"axis-title-x\" text-anchor=\"middle\">\n",
       "          <tspan>x</tspan>\n",
       "        </text>\n",
       "      </g>\n",
       "      <g transform=\"translate(266.01839309452674 352.0 ) \">\n",
       "        <rect x=\"0.0\" y=\"0.0\" height=\"33.0\" width=\"169.98160690547326\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" stroke-width=\"0.0\" fill=\"rgb(255,255,255)\" fill-opacity=\"1.0\">\n",
       "        </rect>\n",
       "        <g transform=\"translate(5.0 5.0 ) \">\n",
       "          <g transform=\"translate(0.0 16.0 ) \">\n",
       "            <text style=\"font-size:15.0px;\" y=\"0.0\" class=\"legend-title\">\n",
       "              <tspan>Color</tspan>\n",
       "            </text>\n",
       "          </g>\n",
       "          <g transform=\"translate(41.487407737689445 0.0 ) \">\n",
       "            <g transform=\"\">\n",
       "              <g>\n",
       "                <g transform=\"translate(1.0 1.0 ) \">\n",
       "                  <g>\n",
       "                    <g >\n",
       "                      <circle fill=\"#e41a1c\" stroke=\"#e41a1c\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"10.5\" cy=\"10.5\" r=\"5.5\" />\n",
       "                    </g>\n",
       "                  </g>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"translate(26.9903027277341 11.5 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"legend-item\" dy=\"0.35em\">\n",
       "                  <tspan>A</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(40.828167298505974 0.0 ) \">\n",
       "              <g>\n",
       "                <g transform=\"translate(1.0 1.0 ) \">\n",
       "                  <g>\n",
       "                    <g >\n",
       "                      <circle fill=\"#377eb8\" stroke=\"#377eb8\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"10.5\" cy=\"10.5\" r=\"5.5\" />\n",
       "                    </g>\n",
       "                  </g>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"translate(26.9903027277341 11.5 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"legend-item\" dy=\"0.35em\">\n",
       "                  <tspan>B</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "            <g transform=\"translate(81.65633459701195 0.0 ) \">\n",
       "              <g>\n",
       "                <g transform=\"translate(1.0 1.0 ) \">\n",
       "                  <g>\n",
       "                    <g >\n",
       "                      <circle fill=\"#4daf4a\" stroke=\"#4daf4a\" stroke-opacity=\"0.0\" stroke-width=\"0.0\" cx=\"10.5\" cy=\"10.5\" r=\"5.5\" />\n",
       "                    </g>\n",
       "                  </g>\n",
       "                </g>\n",
       "              </g>\n",
       "              <g transform=\"translate(26.9903027277341 11.5 ) \">\n",
       "                <text style=\"font-size:13.0px;\" y=\"0.0\" class=\"legend-item\" dy=\"0.35em\">\n",
       "                  <tspan>C</tspan>\n",
       "                </text>\n",
       "              </g>\n",
       "            </g>\n",
       "          </g>\n",
       "        </g>\n",
       "      </g>\n",
       "      <path fill=\"rgb(0,0,0)\" fill-opacity=\"0.0\" stroke=\"rgb(71,71,71)\" stroke-opacity=\"1.0\" stroke-width=\"0.0\" d=\"M0.0 0.0 L0.0 388.0 L442.0 388.0 L442.0 0.0 Z\" pointer-events=\"none\">\n",
       "      </path>\n",
       "    </g>\n",
       "    <g id=\"djqQ5MM\">\n",
       "    </g>\n",
       "  </svg>\n",
       "</svg>\n",
       "                <script>document.getElementById(\"9185a1dc-6e9b-4098-ba77-62981fb162ac\").style.display = \"none\";</script>"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "// When the legend is placed at the top or bottom, you can apply left or right justification\n",
    "\n",
    "gggrid(\n",
    "    listOf(\n",
    "        p + theme()\n",
    "            .legendPositionBottom()\n",
    "            .legendJustificationLeft() \n",
    "        + ggtitle(\"Align legend to the left\"),\n",
    "        p + theme()\n",
    "            .legendPositionBottom()\n",
    "            .legendJustificationRight() \n",
    "        + ggtitle(\"Align legend to the right\")\n",
    "    ),\n",
    "    ncol = 2\n",
    ")"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Kotlin",
   "language": "kotlin",
   "name": "kotlin"
  },
  "language_info": {
   "codemirror_mode": "text/x-kotlin",
   "file_extension": ".kt",
   "mimetype": "text/x-kotlin",
   "name": "kotlin",
   "nbconvert_exporter": "",
   "pygments_lexer": "kotlin",
   "version": "2.2.20-Beta2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
